import React, { PureComponent } from 'react'
import propTypes from 'prop-types'

import '@/css/comps/MyModel.css';


export default class MyModel extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      isStateModelShow: props.isModelShow
    }
  }
  static propTypes = {
    isModelShow: propTypes.bool.isRequired,
    closeColor: propTypes.string,
    fnClosePop: propTypes.func
  }
  static defaultProps = {
    isModelShow: false,
    closeColor: '#fff',
    fnClosePop: () => { }//点击关闭按钮时的回调函数
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      isStateModelShow: nextProps.isModelShow
    })
  }

  handleClosePop = () => {
    let { fnClosePop } = this.props
    this.setState({ isStateModelShow: false }, () => {
      //如果外层传入的函数需要参数,可在外层函数用bind(this,arg1,arg2),形参也写在外层函数中.下方的函数不要传入任何参数,就让它静静地待着
      fnClosePop()
    })
  }
  render() {
    let { closeColor } = this.props
    let { isStateModelShow } = this.state
    return (
      <div style={isStateModelShow ? { display: 'block' } : {display: 'none'}} >
        <div className="mymodel-wrap">
          <div className="mymodel-content">
            <div className="mymodel-close" onClick={this.handleClosePop} style={{ "color": closeColor }}><i className="alifont font20">&#xe62f;</i></div>
            {this.props.children}
          </div>
        </div>
      </div>
    )
  }
}